<!--专辑列表-->
<template>
  <div class="AlbumBox">
    <div class="box" v-if="AlbumList" id="AlbumBox">
      <div
        class="AlbumItem"
        v-for="(item, index) in AlbumList.data"
        :key="index"
        v-proportion="1"
      >
        <img
          :id="'item' + index"
          v-items
          :src="item.cover"
          :ref="'item' + index"
          @up="up(index)"
          @left="autoMove('left', index)"
          @right="autoMove('right', index)"
          @click="gotoList(item.id)"
        />
      </div>
    </div>
  </div>
</template>

<script>
var VueScrollTo = require('vue-scrollto');
export default {
  computed: {
    categoryId() {
      return this.$store.getters.getCategoryId;
    }
  },
  data() {
    return {
      AlbumList: false
    };
  },
  watch: {
    categoryId(newValue) {
      if (newValue !== false) {
        this.albumLoading();
      }
    }
  },
  created() {
    if (this.categoryId != false) {
      this.albumLoading();
    }
  },
  methods: {
    albumLoading() {
      let options = {
        page: 1,
        limit: 12,
        categoryId: this.categoryId.id
      };
      this.$api.albumLoading(this, options);
    },
    up(index) {
      if ((index + 1) % 2 == 1) {
        this.$parent.inHeaderVitems();
      } else {
        this.$service.move(this.$refs['item' + (index - 1)][0]);
      }
    },
    autoMove(direction, index) {
      if (direction == 'right') {
        if (index + 2 > this.AlbumList.data.length - 1) {
          return true;
        } else {
          this.$service.move(this.$refs['item' + (index + 2)][0]);
          this.scoll(index + 2);
        }
      } else if (direction == 'left') {
        if (index - 2 < 0) {
          this.$parent.inMKCategory();
        } else {
          this.$service.move(this.$refs['item' + (index - 2)][0]);
          this.scoll(index - 2);
        }
      }
    },
    scoll(index) {
      this.lrcScrollStatus = true;
      let element = '#item' + index;
      let duration = 100;
      var options = {
        container: '#AlbumBox',
        easing: 'linear',
        offset: -400,
        force: true,
        cancelable: true,
        x: true,
        y: false
      };
      VueScrollTo.scrollTo(element, duration, options);
    },
    gotoList(id) {
      this.$router.push({
        path: '/albumList/' + id
      });
    }
  }
};
</script>

<style lang="less" scoped>
.AlbumBox {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 100%;
  height: 90%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow-x: auto;
}
// 去除滚动条
#AlbumBox::-webkit-scrollbar {
  display: none;
}
.AlbumItem {
  width: 22%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.AlbumItem > img {
  border-radius: 10px;
  transition: 300ms;
  width: 80%;
  height: 80%;
}
.logo > span {
  margin-left: 35px;
  line-height: 80px;
}
.album_name {
  width: 100%;
  position: absolute;
  bottom: 40px;
  display: block;
  background: rgba(230, 0, 0, 1);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.focus {
  width: 90% !important;
  height: 90% !important;
  padding: 4px !important;
}
</style>
